<template>
    <div class="table">
        <div class="container">
            <div class="handle-box" style="text-align: right">
                <el-select v-model="project" filterable @focus="getProjectList" @change="getProjectId(project)" placeholder="请选择项目" class="handle-select mr10">
                    <el-option
                        v-for="item in projectList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="appointment" filterable @focus="getAppointmentList" @change="getData(pageNumber,appointment)" placeholder="请选择可预约信息" class="handle-select mr10">
                    <el-option
                        v-for="item in appointmentList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <br><br>
            <el-table :data="tableData" border class="table" ref="multipleTable">
                <el-table-column prop="user_name" label="预约人姓名">
                </el-table-column>
                <el-table-column prop="start_time" sortable label="开始时间">
                </el-table-column>
                <el-table-column prop="end_time" sortable label="预计结束时间">
                </el-table-column>
                <el-table-column prop="finish_time" sortable label="实际结束时间">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.is_finish == '0'">未完成</span>
                        <span v-if="scope.row.is_finish == '1'">已完成</span>
                    </template>
                </el-table-column>
                <el-table-column label="完成前图片" width="100">
                    <template slot-scope="scope" v-if="scope.row.befor_img !== null">
                        <img :src="scope.row.befor_img+'?x-oss-process=image/resize,w_50,h_50'" style="" @click="showImg(scope.row)">
                    </template>
                </el-table-column>
                <el-table-column label="完成后图片" width="100">
                    <template slot-scope="scope" v-if="scope.row.after_img !== null">
                        <img :src="scope.row.after_img+'?x-oss-process=image/resize,w_50,h_50'" style="" @click="showImg1(scope.row)">
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" sortable label="创建时间">
                </el-table-column>
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">设置</el-button>
<!--                            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="特权" :visible.sync="editVisible" width="60%">
            <appointmentRecordAdd :uid="appointmentRecordId" ref="appointmentRecordAdd" @done="appointmentRecordDone"></appointmentRecordAdd>
        </el-dialog>
        <!-- 查看图片 -->
        <el-dialog title="完成前图片" :visible.sync="editVisible1" width="50%" top="1%">
            <div><img :src="imgUrl" alt="" style="width: 100%;"></div>
        </el-dialog>
        <el-dialog title="完成后图片" :visible.sync="editVisible1" width="50%" top="1%">
            <div><img :src="imgUrl1" alt="" style="width: 100%;"></div>
        </el-dialog>
    </div>
</template>

<script>
    import appointmentRecordAdd from '@/components/project/Appointment-record-add'
    export default {
        components:{
            appointmentRecordAdd,
        },
        name: 'basetable',
        data() {
            return {
                select_word: '',
                tableData: [],
                building:[],
                cur_page: 1,
                projectList: [],
                appointmentList: [],
                multipleSelection: [],
                editVisible: false,
                editVisible1: false,
                imgUrl: '',
                imgUrl1: '',
                value: '',
                project: '',
                appointment: '',
                projectId: '',
                appointmentId: '',
                appointmentRecordId: '',
                pageNumber: '',
                pageSize: 0,
                totalRow: 0,
                currentPage1: 0,
            }
        },
        created() {
        },
        computed: {
            data() {
            }
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 查看图片
            showImg(row){
                this.editVisible1 = true;
                this.imgUrl = row.befor_img;
            },
            showImg1(row){
                this.editVisible1 = true;
                this.imgUrl1 = row.after_img;
            },
            getProjectId(project){
                this.projectId = project;
            },
            getAppointmentList() {
                // this.loadopen();
                this.config.post('/housinggestate/project/appointmentrecord/findAppointmentList',{
                    projectId: this.projectId,
                }).then(res=>{
                    if(res.data.code==='0'){
                        this.appointmentList = res.data.projectAppointmentList;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            getProjectList() {
                // this.loadopen();
                this.config.post('/housinggestate/project/appointmentrecord/findProjectList').then(res=>{
                    if(res.data.code==='0'){
                        this.projectList = res.data.projectList;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            // 获取列表数据
            getData(pageNumber,appointment) {
                this.appointmentId = appointment;
                this.loadopen();
                // console.log(this.value);
                this.config.post('/housinggestate/project/appointmentrecord/findPage', {
                    pageNum: pageNumber?pageNumber:1,
                    projectId: this.projectId,
                    appointmentId: this.appointmentId,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.currentPage1 = res.data.page.pageNumber;
                        // this.tableData = res.data.roleList;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            search() {
            },
            // 分页导航
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getData(val,this.appointmentId);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            // 添加
            add(){
                this.editVisible = true;
                this.appointmentRecordId = '';
                setTimeout(()=>{
                    this.$refs.appointmentRecordAdd.getInfo();
                }, 100);
            },
            // 编辑
            handleEdit(index, row) {
                if(row.is_finish == '1'){
                    this.$message.error("该预约信息已完成，不需要再设置！");
                }else{
                    this.editVisible = true;
                    this.appointmentRecordId = row.id;
                    setTimeout(()=>{
                        // console.log("走到这了")
                        this.$refs.appointmentRecordAdd.getInfo();
                    }, 100);
                }
            },
            handleDelete(index, row) {
                this.$confirm('确定删除此楼层?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    // console.log(row.id)
                    this.config.post('/housinggestate/housinggestate/floor/delete', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.code==='0'){
                            this.$message.success(res.data.message);
                            this.getData(this.pageNumber,this.appointmentId);
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            appointmentRecordDone() {
                this.editVisible = false;
                this.getData(this.pageNumber,this.appointmentId);
            },
            // 保存编辑
            saveEdit() {
            },
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        float: left;
        width: 300px;
        display: inline-block;
    }

    .handle-input {
        float: left;
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
</style>
